<template>
  <div class="wrapper">
    <dx-header-bar title="告警查询"></dx-header-bar>
    <dx-search-bar placeholder="搜索" component="customer" @click.native="showSearchPopup"/>
    <dx-search-alarm ref="searchPopup"
                     :default-value="searchDefaultValue"
                     @on-search="search">
    </dx-search-alarm>
    <md-tab-bar :items="tabList" v-model="tabCurrent"
                class="tab-bar" @change="changeAlarmType"></md-tab-bar>
    <md-scroll-view class="scroll-view"
                    ref="scrollView"
                    :scrolling-x="false"
                    @refreshing="$_onRefresh"
                    @endReached="$_onEndReached">
      <md-scroll-view-refresh
        slot="refresh"
        slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
        :scroll-top="scrollTop"
        :is-refreshing="isRefreshing"
        :is-refresh-active="isRefreshActive"/>
      <md-field class="scroll-view-item" v-for="(item,index) in dataList" :key="index">
        <div slot="header" class="view-item-header">
          <span class="index">{{index+1}}.</span>
          <span class="title">{{item.PRODUCT_NO}}{{'('+item.ASSURE_GRADE+')'}}</span>
        </div>
        <md-detail-item title="电路名称：">
          <div class="detail-item-content">{{item.CIRC_NAME}}</div>
        </md-detail-item>
        <md-detail-item title="报障编号：">
          <div class="detail-item-content">{{item.WARNING_NO}}</div>
        </md-detail-item>
        <md-detail-item title="告警标题：">
          <div class="detail-item-content">{{item.ALARMTITLE}}</div>
        </md-detail-item>
        <md-detail-item title="告警级别：">
          <div class="detail-item-content">{{item.ALARMSEVERITY}}</div>
        </md-detail-item>
        <md-detail-item title="网元名称：">
          <div class="detail-item-content">{{item.NENAME}}</div>
        </md-detail-item>
        <md-detail-item title="设备类型：">
          <div class="detail-item-content">{{item.EQUIPMENTCLASS}}</div>
        </md-detail-item>
        <md-detail-item title="告警发生时间：">
          <div class="detail-item-content">{{item.EVENTTIME}}</div>
        </md-detail-item>
        <md-detail-item title="告警清除时间：">
          <div class="detail-item-content">{{item.CANCELTIME}}</div>
        </md-detail-item>
        <md-detail-item title="告警对象：">
          <div class="detail-item-content">{{item.LOCATENENAME}}</div>
        </md-detail-item>
      </md-field>
      <md-scroll-view-more slot="more" :is-finished="isFinished"
                           :finished-text="finishedText"/>
    </md-scroll-view>
  </div>
</template>

<script type="text/ecmascript-6">
import { DxHeaderBar, DxSearchBar, DxSearchAlarm } from '@/components';
import { TabBar, ScrollView, ScrollViewRefresh, ScrollViewMore, Field, FieldItem, DetailItem } from 'mand-mobile';
import { getAlarmList } from '@/api/resource';
import moment from 'moment';

export default {
  components: {
    DxHeaderBar,
    DxSearchBar,
    DxSearchAlarm,
    [TabBar.name]: TabBar,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ScrollViewMore.name]: ScrollViewMore,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [DetailItem.name]: DetailItem
  },
  data() {
    return {
      searchDefaultValue: '',
      tabCurrent: '',
      dataList: [],
      isFinished: false,
      tabList: [
        { name: 'ontime', label: '实时告警' },
        { name: 'history', label: '历史告警' }
      ],
      params: {
        page: 1,
        limit: 10
      }
    };
  },
  computed: {
    finishedText() {
      return this.dataList.length ? '已全部加载' : '无数据';
    }
  },
  created() {
    const { productNo, customerCode } = this.$route.query;
    this.searchDefaultValue = customerCode ? `&customerCode=${customerCode}` : '';
    this.searchDefaultValue += productNo ? `&productNo=${productNo}` : '';
    this.params.eventTimeStart = moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
    this.params.eventTimeEnd = moment().format('YYYY-MM-DD HH:mm:ss');
    this.params.customerCode = customerCode || '';
    this.params.productNo = productNo || '';
    this.changeAlarmType(this.tabList[0]);
  },
  methods: {
    showSearchPopup() {
      this.$refs.searchPopup.showPopup();
    },
    search(form) {
      this.params = Object.assign(this.params, form);
      this.isFinished = false;
      this.params.page = 1;
      // 搜索时触发下拉刷新增加交互动画，用于告知用户数据加载状态
      this.$refs.scrollView.triggerRefresh();
    },
    // 下拉刷新
    $_onRefresh() {
      this.params.page = 1;
      this.isFinished = false;
      this.loadData('refresh');
    },
    $_onEndReached() {
      if (this.isFinished) return;
      this.params.page += 1;
      this.loadData('reached');
    },
    $_onFinished(data, type, isFinished) {
      this.isFinished = isFinished;
      if (type === 'refresh') {
        this.dataList = data;
        this.$refs.scrollView.finishRefresh();
      } else {
        this.dataList = this.dataList.concat(data);
        this.$refs.scrollView.finishLoadMore();
      }
    },
    changeAlarmType(item) {
      if (!this.tabCurrent) {
        this.tabCurrent = item.name;
      }
      this.params.type = item.name;
      this.$nextTick(() => {
        this.$refs.scrollView.scrollTo(0, 0);
        this.$refs.scrollView.triggerRefresh();
      });
    },
    loadData(type) {
      // const { productNo, customerCode, circName, warningNo } = this.params;
      const params = Object.assign(this.params, {});
      // 当产品实例，客户编号，电路名称，报障编号等都为空时，默认添加时间参数，优化接口请求过慢都问题
      // if (!productNo && !customerCode && !circName && !warningNo) {
      //   params.eventTimeStart = moment().subtract(3, 'days').format('YYYY-MM-DD HH:mm:ss');
      //   params.eventTimeEnd = moment().format('YYYY-MM-DD HH:mm:ss');
      // } else {
      //   params.eventTimeStart = '';
      //   params.eventTimeEnd = '';
      // }
      getAlarmList(params).then(result => {
        const { datas, count, page, limit } = result.data;
        if (datas instanceof Array && datas.length) {
          this.$_onFinished(datas, type, page * limit > count);
        } else {
          this.$_onFinished([], type, true);
        }
      }).catch(() => {
        this.$_onFinished([], type, true);
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
  .wrapper
    display : flex
    flex-direction : column
    height : 100%

  .tab-bar
    background-color : #fff

  .scroll-view
    flex : 1

  .scroll-view-item
    margin-bottom : 20px
    padding : 20px

  .view-item-header
    color : theme-color
    font-size : 32px
    font-weight : bold
    .index
      margin-right : 20px
      color : #333

  .detail-item-content
    flex : 1
</style>
